<template>
    <div class="order-wrap">
        <div class="order-manage-detail">
            <el-card shadow="hover">
                <topTitle title="订单详情"/>
                <div class="card-title">玩家趣游戏账号</div>
                <div class="order-user-detail">
                    <div class="detail-left">
                        <div class="user-icon">
                            <img :src="orderInfo.userIcon" alt="">
                        </div>
                        <div class="user-msg">
                            <div class="item-box">
                                <div class="item-title">趣ID：</div>
                                <div class="item-content click-btn" @click="goUserDetail(orderInfo.userId)">{{ orderInfo.userId }}</div>
                            </div>
                            <div class="item-box">
                                <div class="item-title">昵称：</div>
                                <div class="item-content">{{ orderInfo.userName }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="detail-right">
                        <div class="item-box">
                            <div class="item-title">订单号：</div>
                            <div class="item-content">{{ orderInfo.orderNo }}</div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">下单时间：</div>
                            <div class="item-content">{{ tableFormatDate(orderInfo.startTime) }}</div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">体验时长：</div>
                            <div class="item-content">{{ tableFormatDate(orderInfo.time) || '-' }}</div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">结算时间：</div>
                            <div class="item-content">{{ tableFormatDate(orderInfo.endTime) }}</div>
                        </div>
                        <div class="item-box" v-if="orderInfo.downType !== -1">
                            <div class="item-title">下线方式：</div>
                            <div class="item-content" v-if="orderInfo.downType === 1">不在线自动结算下线</div>
                            <div class="item-content" v-else-if="orderInfo.downType === 2">余额不足自动下线</div>
                            <div class="item-content" v-else-if="orderInfo.downType === 3">账号异常自动下线</div>
                            <div class="item-content" v-else>手动结算</div>
                        </div>
                    </div>
                </div>

                <div class="other-box">
                    <div class="other-left" v-if="orderInfo.orderSkinSelectVo">
                        <div class="card-title">下单明细</div>
                        <div class="item-box" v-for="(item, index) in orderInfo.orderSkinSelectVo.skinPriceDescList" :key="index">{{ item }}</div>
                        <div class="item-box" style="margin-top:10px">
                            <div class="item-title">段位：</div>
                            <div class="item-content">
                                <span v-for="(item, index) in orderInfo.orderSkinSelectVo.jobList" :key="index">
                                    <i v-if="index > 0">, </i>{{ item }}
                                </span>
                            </div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">时长：</div>
                            <div class="item-content">{{ orderInfo.orderSkinSelectVo.hourDesc }}</div>
                        </div>
                    </div>
                    <div class="other-right" v-if="orderInfo.orderSelectAccountVo">
                        <div class="card-title">匹配账号</div>
                        <div class="item-box">
                            <div class="item-title">QQ：</div>
                            <div class="item-content">{{ orderInfo.orderSelectAccountVo.accountNo }}</div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">昵称：</div>
                            <div class="item-content">{{ orderInfo.orderSelectAccountVo.roleName }}</div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">区服：</div>
                            <div class="item-content">{{ orderInfo.orderSelectAccountVo.serverName }}</div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">账号价值：</div>
                            <div class="item-content">{{ orderInfo.orderSelectAccountVo.maxDiamond }}</div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">号主趣ID：</div>
                            <div class="item-content click-btn" @click="goUserDetail(orderInfo.orderSelectAccountVo.userId)">{{ orderInfo.orderSelectAccountVo.userId }}</div>
                        </div>
                    </div>
                </div>
            </el-card>

            <!-- 对战记录 -->
            <el-card shadow="hover" v-if="orderInfo.tradeAccountMatchVoList && orderInfo.tradeAccountMatchVoList.length > 0">
                <topTitle title="对战记录"/>
                <div class="war-record" v-for="(item, index) in orderInfo.tradeAccountMatchVoList" :key="index">
                    <div class="war-left">
                        <div class="hero-img">
                            <img :src="item.heroIcon" alt="">
                        </div>
                        <div class="status">
                            <div class="top">
                                <div class="status-sub" :style="{ 'color': item.gameresult === '1' ? '#3497FF' : '#E74A4A'}">{{ item.gameresult === '1' ? '胜利' : '失败'}}</div>
                                <div class="info">{{item.killcnt}}/{{item.deadcnt}}/{{item.assistcnt}}</div>
                            </div>
                            <div class="bot">
                                <img class="main-img" :src="item.heroSkillID" alt="">
                                <img v-for="(i, index) in item.equId" :key="index" class="zb-img" :src="i" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="war-right">
                        <div class="name">{{ item.mapName }}</div>
                        <div class="title">{{ item.endTime }}</div>
                    </div>
                </div>
            </el-card>
            <el-card shadow="hover" v-else>
                <topTitle title="对战记录"/>
                <p>无</p>
            </el-card>

            <el-card shadow="hover" v-if="orderInfo.tradeAccountPunishVoList && orderInfo.tradeAccountPunishVoList.length > 0">
                <topTitle title="违规流水"/>
                <div class="push-card">
                    <div class="push-title">
                        <div class="title-item">处罚日期</div>
                        <div class="title-item">处罚</div>
                        <div class="title-item">处罚原因</div>
                    </div>
                    <div class="push-body">
                        <div class="body-item" v-for="(item, index) in orderInfo.tradeAccountPunishVoList" :key="index">
                            <span>{{ tableFormatDate(item.date) }}</span>
                            <span>{{ item.title }}</span>
                            <span>{{ item.subTitle }}</span>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card shadow="hover" v-else>
                <topTitle title="违规流水"/>
                <p>无</p>
            </el-card>

            <el-card shadow="hover">
                <topTitle title="启动价结算"/>
                <div class="btn-flex-box" v-if="orderInfo.orderStartPriceInfoVo">
                    <div class="msg-box">
                        <div class="item-box">
                            <div class="item-title">应付：</div>
                            <div class="item-content">{{ orderInfo.orderStartPriceInfoVo.needApply }} 趣宝石</div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">优惠：</div>
                            <div class="item-content">{{ orderInfo.orderStartPriceInfoVo.reduceInfo || 0 }} 趣宝石</div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">实付：</div>
                            <div class="item-content">{{ orderInfo.orderStartPriceInfoVo.hasApply }} 趣宝石</div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">已退款：</div>
                            <div class="item-content">{{ orderInfo.orderStartPriceInfoVo.giveBackMoney || 0 }} 趣宝石</div>
                        </div>
                    </div>
                    <div class="btn-box" v-if="orderInfo.downType !== -1">
                        <div v-if="orderInfo.orderStartPriceInfoVo.punishStatus !== 5">
                            <el-button @click="orderback(orderInfo.orderStartPriceInfoVo.hasApply, orderInfo.orderStartPriceInfoVo.id)" type="success" size="mini" style="width:80px">退款</el-button>
                        </div>
                        <div v-else>
                            <p>已退款</p>
                        </div>
                    </div>
                </div>
            </el-card>

            <el-card shadow="hover">
                <topTitle title="超时支付部分"/>
                <div class="btn-flex-box" v-if="orderInfo.orderUpPriceInfoVo">
                    <div class="msg-box">
                        <div class="item-box">
                            <div class="item-title">超时时间：</div>
                            <div class="item-content">{{ orderInfo.orderUpPriceInfoVo.hour }}</div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">实付：</div>
                            <div class="item-content">{{ orderInfo.orderUpPriceInfoVo.needApply }} 趣宝石</div>
                        </div>
                        <div class="item-box">
                            <div class="item-title">违规扣款：</div>
                            <div class="item-content">{{ orderInfo.orderUpPriceInfoVo.giveBackMoney || 0 }} 趣金币</div>
                        </div>
                    </div>
                    <div class="btn-box">
                        <div v-if="orderInfo.orderUpPriceInfoVo.punishStatus !== 5">
                            <el-button @click="orderback(orderInfo.orderUpPriceInfoVo.needApply, orderInfo.orderUpPriceInfoVo.id)" type="success" size="mini" style="width:80px">退款</el-button>
                        </div>
                        <div style="margin-top:10px" v-else>
                            <p>已退款</p>
                        </div>
                    </div>
                </div>
                <div v-else>无</div>
            </el-card>

            <el-card shadow="hover">
                <div class="title-and-btn">
                    <topTitle title="惩罚部分"/>
                    <div v-if="orderInfo.downType !== -1"><el-button type="danger" size="mini" style="width:80px" @click="showPunishment = true">追加惩罚</el-button></div>
                </div>
                <div v-if="orderInfo.tradePunishApplyVoList.length" class="punishment-box">
                    <div v-for="(item, index) in orderInfo.tradePunishApplyVoList" :key="index" class="btn-flex-box">
                        <div class="msg-box">
                            <div class="item-box">
                                <div class="item-title">违规行为：</div>
                                <div class="item-content">{{ item.message }}</div>
                            </div>
                            <div class="item-box">
                                <div class="item-title">罚款金额：</div>
                                <div class="item-content">{{ item.punishPrice || 0 }} 趣宝石</div>
                            </div>
                            <div class="item-box">
                                <div class="item-title">账号限制惩罚：</div>
                                <div class="item-content"></div>
                            </div>
                            <div class="item-box">
                                <div class="item-title">下达追缴时间：</div>
                                <div class="item-content">{{ tableFormatDate(item.createTime) }}</div>
                            </div>
                            <div class="item-box">
                                <div class="item-title">用户支付时间：</div>
                                <div class="item-content">{{ tableFormatDate(item.applyTime) || '无' }}</div>
                            </div>
                            <div class="item-box">
                                <div class="item-title">状态：</div>
                                <div class="item-content" v-if="item.punishStatus === 0">未支付</div>
                                <div class="item-content" v-if="item.punishStatus === 1">已支付</div>
                                <div class="item-content" v-if="item.punishStatus === 3">平台垫付</div>
                                <div class="item-content" v-if="item.punishStatus === 4">已撤销</div>
                                <div class="item-content" v-if="item.punishStatus === 5">已退款</div>
                            </div>
                            <div class="item-box">
                                <div class="item-title">撤销理由：</div>
                                <div class="item-content">{{ item.cancelMessage }}</div>
                            </div>
                        </div>
                        <div class="btn-box">
                            <div>
                                <el-button type="warning" :disabled="!(item.status !== 1 && item.status !== 3)" size="mini" style="width:80px" @click="delPunishment(item.id, item.message)">撤销追加</el-button>
                            </div>
                            <div style="margin-top:10px">
                                <el-button type="success" :disabled="!(item.punishStatus !== 5)" size="mini" style="width:80px" @click="orderback(item.punishPrice, item.id)">退款</el-button>
                            </div>
                            <div style="margin-top:10px">
                                <el-button type="info" size="mini" :disabled="!(item.status !== 1 && item.status !== 3)" style="width:80px" @click="ptApply(item.id, item.message)">平台垫付</el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else class="no-data">暂无惩罚</div>

            </el-card>

            <el-card shadow="hover" v-if="orderInfo.tradeAccountUserIncome">
                <topTitle title="号主所得"/>
                <div class="item-box">
                    <div class="item-title">账号出租分成所得：</div>
                    <div class="item-content">{{ orderInfo.tradeAccountUserIncome.orderGet }} 趣金币</div>
                </div>
                <div class="item-box">
                    <div class="item-title">违规罚款所得：</div>
                    <div class="item-content">{{ orderInfo.tradeAccountUserIncome.punishGet || 0 }} 趣金币</div>
                </div>
                <div class="item-box">
                    <div class="item-title">已退款：</div>
                    <div class="item-content">{{ orderInfo.tradeAccountUserIncome.hasGivBack || 0 }} 趣金币</div>
                </div>
                <div class="item-box">
                    <div class="item-title">总计获得：</div>
                    <div class="item-content">{{ orderInfo.tradeAccountUserIncome.total }} 趣金币</div>
                </div>
            </el-card>
        </div>

        <punishmentDialog v-model="showPunishment" @submit="addPunishment"/>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="300px">
            <div>
                <el-input-number style="width:180px;" v-model="dialogParams.piece" :max="maxPiece" min="0"></el-input-number>
                <span style="margin-left: 20px;">趣宝石</span>
            </div>
            <div class="dialog-reason">
                <p>理由:</p>
                <el-input type="textarea" style="width:260px;" v-model.trim="dialogParams.reason"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogSure">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="undoRemark" width="400px">
            <div style="padding: 20px 0;">
                <el-input v-model="remark" type="textarea" placeholder="添加备注原因"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="undoRemark = false">取 消</el-button>
                <el-button type="primary" @click="dialogUndo">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { formatDate } from '@/utils/utils'
import punishmentDialog from './component/punishmentDialog'
export default {
    data () {
        return {
            undoRemark: false,
            remark: '',
            punishId: '',
            id: this.$route.query.id,
            dialogTitle: '',
            maxPiece: 1,
            orderInfo: {
                orderStartPriceInfoVo: {},
                orderSelectAccountVo: {},
                orderSkinSelectVo: {},
                tradeAccountUserIncome: {},
                orderUpPriceInfoVo: {},
                tradeAccountPunishVoList: [],
                tradePunishApplyVoList: []
            },
            dialogParams: {},
            showPunishment: false,
            dialogVisible: false
        }
    },
    created () {
        this.getDetail()
    },
    components: {
        punishmentDialog
    },

    methods: {
        getDetail () {
            this.$http.get('/trade/selectTradeOrder', {
                params: {
                    orderId: this.id
                }
            }).then(res => {
                if (res.code === '0') {
                    this.orderInfo = res.data
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        orderback (piece, id) { // 退款
            this.dialogVisible = true
            this.maxPiece = piece
            this.dialogParams.piece = piece
            this.dialogParams.punishId = id
            this.dialogTitle = '请输入退款金额'
        },
        dialogSure () {
            if (!this.dialogParams.reason) {
                return this.$message({
                    type: 'warning',
                    message: '请输入退款理由'
                })
            }
            this.dialogParams.orderId = this.id
            this.$http.post('/trade/orderDrawBack', this.dialogParams).then(res => {
                if (res.code === '0') {
                    this.dialogVisible = false
                    this.dialogParams = {}
                    this.$message({
                        type: 'success',
                        message: '退款成功'
                    })
                    this.getDetail()
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            })
        },
        // 追加罚款成功事件
        addPunishment () {
            this.getDetail()
        },

        // 撤销追加
        delPunishment (punishId, msg) {
            let m = `是否撤销追加违规行为 （${msg}），此操作不可逆, 是否继续?`
            this.$confirm(m, '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.punishId = punishId
                this.undoRemark = true
            }).catch(() => {
            })
        },
        dialogUndo () {
            if (!this.remark) {
                this.$message.error('请填写备注原因')
                return
            }
            this.undoRemark = false
            this.$http.get('/trade/updatePunishStatus', {
                    params: {
                        punishId: this.punishId,
                        message: this.remark
                    }
            }).then(res => {
                if (res.code === '0') {
                    this.$message({
                        type: 'success',
                        message: '撤回成功'
                    })
                    this.remark = ''
                    this.getDetail()
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            })
        },
        ptApply (punishId, msg) {
            let m = `是否垫付违规行为 （${msg}），此操作不可逆, 是否继续?`
            this.$confirm(m, '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get('/trade/updatePunishAccountApply', {
                    params: { punishId }
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            type: 'success',
                            message: '垫付成功'
                        })
                        this.getDetail()
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.desc
                        })
                    }
                })
            })
        },
        // 查看用户详情
        goUserDetail (id) {
            const { href } = this.$router.resolve({
                path: '/dataReport/userInfo',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },
        tableFormatDate (time) {
            return formatDate(time, 'YYYY-MM-DD HH:MM:SS')
        }
    }
}
</script>

<style lang="scss" scoped>
    .war-record {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0px;
        border-bottom: 1px solid #E4E4E4;
        .war-left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .hero-img {
                width: 60px;
                height: 60px;
                border-radius: 4px;
                margin-right: 18px;
                img {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    border-radius: 4px;
                }
            }
            .status {
                .top {
                    margin-bottom: 10px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .status-sub {
                        font-size: 14px;
                        color: #3497FF;
                        margin-right: 10px;
                    }
                    .info {
                        font-size: 12px;
                        color: #1C202C;
                    }
                }
                .bot {
                    .main-img {
                        display: inline-block;
                        width: 30px;
                        height: 30px;
                        margin-right: 18px;
                    }
                    .shu {
                        width: 1px;
                        height: 8px;
                        background: #AFA99F;
                        border-radius: 1px;
                    }
                    .zb-img {
                        display: inline-block;
                        width: 30px;
                        height: 30px;
                        border-radius: 50px;
                        margin-right: 18px;
                    }
                }
            }
        }
        .war-right {
            .name {
                font-size: 12px;
                color: rgba(28, 32, 44, 0.6);
                margin-bottom: 10px;
                font-weight: 500;
            }
            .title {
                font-size: 12px;
                color: rgba(28, 32, 44, 0.6);
            }
        }
    }
    .war-record:last-child {
        border: none
    }
    .push-card {
        border: 1px solid #eee;
        border-radius: 5px;
        .push-title {
            display: flex;
            height: 40px;
            border-bottom: 1px solid #ebeef5;
            background-color: #f5f7fa;
            .title-item {
                flex: 1;
                text-align: center;
                line-height: 40px;
                border-right: 1px solid #ebeef5;
                font-size: 14px;
                font-weight: 500;
                color: #303133;
            }
            .title-item:last-child {
                border: none;
            }
        }
        .push-body {
            height: auto;
            .body-item {
                display: flex;
                text-align: center;
                line-height: 40px;
                border-bottom: 1px solid #ebeef5;
                span {
                    flex: 1;
                    border-right: 1px solid #ebeef5;
                    font-size: 13px;
                    color: rgba(0, 0, 0, 0.7);
                }
                span:last-child {
                    border: none;
                }
            }
            .body-item:last-child {
                border: none;
            }
        }
    }
    .order-wrap {
        min-height: 100%;
        background:rgb(245, 245, 245);
    }
    .order-manage-detail {
        margin: 0 auto;
        max-width: 800px;
        /deep/ .el-card {
            margin-bottom: 10px;
        }

        .card-title {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        .click-btn {
            cursor: pointer;
            color: #409EFF!important;
            font-size: 13px;
            font-weight: 500;
            &:hover {
                text-decoration: underline;
            }
        }
        .item-box {
            display: flex;
            font-size: 13px;
            margin-bottom: 2px;
            color:rgba(0, 0, 0, .7);
            .item-title {
                font-size: 13px;
                font-weight: 500;
                color: rgb(48, 49, 51);
            }
            .item-content {
                color:rgba(0, 0, 0, .7);
            }
        }
        .no-data {
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .order-user-detail {
            display: flex;
            align-items: center;
            .detail-left, .detail-right {
                flex: 1;
            }
            .detail-left {
                display: flex;
                align-items: center;
                .user-icon {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 10px;
                    > img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .detail-right {
                .item-title {
                    width: 72px;
                }
            }
        }

        .other-box {
            margin-top: 20px;
            display: flex;
            .other-left, .other-right {
                flex: 1;
            }
            .other-right {
                .item-title {
                    width: 72px;
                }
            }
        }

        .btn-flex-box {
            display: flex;
            align-items: center;
            .msg-box {
                flex: 1;
                border-right: 1px solid #eee;
            }
            .btn-box {
                width: 100px;
                margin-left: 30px;
            }
        }

        .title-and-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .punishment-box {
            border: 1px solid #eee;
            .btn-flex-box {
                padding: 10px;
                border-bottom: 1px solid #eee;
                &:last-child {
                    border-bottom: none;
                }
            }
        }
    }
    .dialog-reason {
        margin-top: 20px;
        p {
            margin-bottom: 10px;
        }
    }
</style>
